<template>
    <div class="special" ref="special">
        <div class="top">
            <div class="left">最新专题</div>
            <router-link to="/" class="right">查看全部 ></router-link>
        </div>
        <ul class="foot">
            <li v-for="item in special" :key="item.id">
                <div class="img">
                    <img :src="item.detailsUrl" alt="">
                    <div class="ing">
                        <p class="ing1">{{item.title}}</p>
                        <p class="ing2">{{item.summary}}</p>
                        <span class="ing3">¥{{item.lowestPrice}}起</span>
                    </div>
                </div>
                <div class="bott">
                    <span class="bott1">
                        <span class="bot">
                            <i class="iconfont icon-hart1"></i>
                            <span>{{item.collectNum}}</span>
                        </span>
                        <span class="bot">
                            <i class="iconfont icon-see"></i>
                            <span>{{item.viewNum}}</span>
                        </span>
                    </span>
                    <span class="bott2">
                        <i class="iconfont icon-hart1"></i>
                        <span>{{item.replyNum}}</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>


<script>
import {getSpecial} from '@/Api/homeapi'
import { server } from '@/Api/constUp'
export default {
    data(){
        return{
            special:[]
        }
    },
    methods:{
        async getSpe(){
            let {data:res} =await getSpecial(3)
            console.log(res);
            this.special = res.result
        }
    },
    mounted(){
        // this.getSpe()

        server(this.$refs.special,this.getSpe)
    }
}
</script>


<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
    .special{
        width: 1240px;
        height: 495px;
        margin: auto;
       
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // background: orange;
        .top{
            width: 100%;
            height: 35px;
            margin-bottom: 40px;
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // background: yellow;

            .left{
                font-size: 32px;
            }
            .right{
                color: gray;
                text-decoration: none;
            }
            .right:hover{
                color: $xtxColor;
            }
        }

        .foot{
            width: 100%;
            height: 360px;
            display: flex;
            margin-bottom: 40px;
            justify-content: space-between;
            // background: orange;
            li:hover{
                transform: translateY(-3px);
                box-shadow: 0 0 5px gray;
            }
            li{
                width: 404px;
                height: 360px;
                display: flex;
                flex-direction: column;
                transition: all .3s;
                // background: greenyellow;
                

                .img{
                    width: 100%;
                    height: 288px;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .ing{
                        width: 100%;
                        height: 72px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        p{
                            width: 100%;
                            height: 50%;
                            color: white;
                        }

                        .ing1{
                            width: 60%;
                            font-size: 22px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        
                        }
                        .ing2{
                            width: 60%;
                            color: gray;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .ing3{
                            width: 80px;
                            height: 30px;
                            text-align: center;
                            line-height: 30px;
                            position: absolute;
                            right: 30px;
                            bottom: 10px;
                            color: red;
                            background: white;
                            border-radius: 2px;
                        }
                    }
                }
                .bott{
                    width: 100%;
                    height: 72px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .bott1{
                        width: 80%;
                        .bot{
                           margin-left: 20px;
                        }
                    }
                    .bott2{
                        width: 20%;
                    }

                }
            }
        }
    }
</style>